<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
	</head>
	<body>
	    <div class="back">
	        <a href="javascript:history.go(-1);">
	            <img src="img/back.png" alt="" />
	        </a>
	    </div>
		<div class="top"><h2>尚尚曝付数据中心</h2></div>
		<div class="home"><a href="index.html"><img src="img/home.png" alt="" /></a><a href="index.html">地图模式</a></div>
		<div id="region" style="position: absolute;top: 120px; left:5%">
			<form class="form-inline">
				<p>请选择省市区：</p>
			  	<div>
			    	<div class="form-group">
						<select id="province">
							<option value="">---- 选择省 ----</option>
						</select>
					</div>
					<div class="form-group">
						<select id="city">
							<option value="">---- 选择市 ----</option>
						</select>
					</div>
					<div class="form-group">
						<select id="county">
							<option value="">---- 选择区县 ----</option>
						</select>
					</div>
			  	</div>
			</form>
		</div>
		<h2 class="name" id="name">这里显示商家名称</h2>
		<div class="main" id="main">
			<div class="left">
				<div class="part1">
					<div class="title">— 总体数据概览 —</div>
					<ul>
						<li id="shop_num_li" onclick="toshoplist()">商家数量<p id="shop_num">0</p></li>
						<li>订单数量<p id="order_num">0</p></li>
						<li>广告数量<p id="ad_num">0</p></li>
						<li>广告播放数量<p id="adplay_num">0</p></li>
					</ul>
				</div>
				<div class="part3">
					<div class="p">
						<p>月订单数：<span id="month_order_num">0单</span></p>
					</div>
					<div class="p">
						<p>月广告数：<span id="month_ad_num">0条</span></p>
					</div>
					<div class="p">
						<p>月广告播放数：<span id="month_adplay_num">0条</span></p>
					</div>
				</div>
				<!-- <div class="part2">
					<div class="title">商家分布</div>
					<div id="container" style="height: 100%"></div>
				</div> -->
			</div>
			<div class="right">
				<div class="part4">
					<div class="tit">
						<ul>
							<li class="putdata now" id="putdata365" onclick="putdata(365)">365天</li>
							<li class="putdata" id="putdata180" onclick="putdata(180)">180天</li>
							<li class="putdata" id="putdata90" onclick="putdata(90)">90天</li>
							<li class="putdata" id="putdata30" onclick="putdata(30)">30天</li>
							<li class="putdata" id="putdata7" onclick="putdata(7)">7天</li>
							<li class="putdata" id="putdata1" onclick="putdata(1)">24小时</li>
						</ul>
					</div>
					<div class="con">
						<ul>
							<li>
								<img src="img/icon1.png" alt="" />
								<p>订单量：<span id="date_order_num">0单</span></p>
							</li>
							<li>
								<img src="img/icon2.png" alt="" />
								<p>广告数：<span id="date_ad_num">0条</span></p>
							</li>
							<li>
								<img src="img/icon1.png" alt="" />
								<p>广告投放量：<span id="date_adput_num">0条</span></p>
							</li>
							<li>
								<img src="img/icon2.png" alt="" />
								<p>广告播放量：<span id="date_adplay_num">0条</span></p>
							</li>
						</ul>
					</div>
				</div>
				<div class="part5">
					<div class="tit">今日数据<p>today's data</p></div>
					<ul>
						<li id="today_shop_num_li">新增商家：<p id="today_shop_num">0家</p></li>
						<li>订单数：<p id="today_order_num">0单</p></li>
						<li>广告数：<p id="today_ad_num">0条</p></li>
						<li>投放数：<p id="today_adput_num">0条</p></li>
						
					</ul>
				</div>
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/config.js"></script>
		<script type="text/javascript">
		
			var baseurl = getBaseUrl();
		
			var searchFrom = {
				's_p_code':'',
				's_c_code':'',
				's_r_code':'',
				'day_type':365,
				's_mid': '',
			};
			//验证是否为商家统计
			const urlParams = new URLSearchParams(window.location.search);
			console.log(urlParams.get('name'))
			$("#name").html(urlParams.get('name'));
			const paramsObject = Object.fromEntries(urlParams.entries());
			if(paramsObject && paramsObject.id){
				searchFrom.s_mid = paramsObject.id;
				// $(".home").remove();
				$("#region").remove();
				$("#shop_num_li").addClass("n");
			}

			function getRegion(data,type){
				axios(baseurl+"index.region/searchRegion", {
					method: "POST",
					data: data,
				}).then(res => {
					if(res.data.code == 1){
						var regions = document.getElementById(type);
						$("#"+type).children().remove();
						if(type == "province"){
							var tops = '<option value="">---- 选择省 ----</option>';
							regions.insertAdjacentHTML('beforeend',tops);
						}else if(type == "city"){
							var tops = '<option value="">---- 选择市 ----</option>';
							regions.insertAdjacentHTML('beforeend',tops);

							var county = document.getElementById('county');
							$("#county").children().remove();
							var countytops = '<option value="">---- 选择区县 ----</option>';
							county.insertAdjacentHTML('beforeend',countytops);
						}else if(type == "county"){
							var tops = '<option value="">---- 选择区县 ----</option>';
							regions.insertAdjacentHTML('beforeend',tops);
						}else{
							var tops = '';
						}
						for(var i = 0; i < res.data.data.length; i++){
							var texts = '<option value="'+res.data.data[i].area_number+'">'+res.data.data[i].region_name+'</option>';
							regions.insertAdjacentHTML('beforeend',texts);
						}
					}else{
						console.log(res.data.msg);
					}
				})
			}
			if(searchFrom.s_mid == ''){
				getRegion({},'province');
			}

			$("#province,#city,#county").change(function(){
				if($(this).attr("id") == "province"){//选择省查询市
					var newSelect = $(this).val();
					if(newSelect != ''){
						getRegion({'area_number':newSelect},'city');
					}else{
						var regions = document.getElementById('city');
						$("#city").children().remove();
						var tops = '<option value="">---- 选择市 ----</option>';
						regions.insertAdjacentHTML('beforeend',tops);

						var county = document.getElementById('county');
						$("#county").children().remove();
						var countytops = '<option value="">---- 选择区县 ----</option>';
						county.insertAdjacentHTML('beforeend',countytops);
					}
					searchFrom.s_p_code = newSelect;
					searchFrom.s_c_code = '';
					searchFrom.s_r_code = '';
					getdata(searchFrom);
					getdaydata(searchFrom);
				}
				if($(this).attr("id") == "city"){//选择市查询区县
					var newSelect = $(this).val();
					if(newSelect != ''){
						getRegion({'area_number':newSelect},'county');
					}else{
						var county = document.getElementById('county');
						$("#county").children().remove();
						var countytops = '<option value="">---- 选择区县 ----</option>';
						county.insertAdjacentHTML('beforeend',countytops);
					}
					searchFrom.s_c_code = newSelect;
					searchFrom.s_r_code = '';
					getdata(searchFrom);
					getdaydata(searchFrom);
				}
				if($(this).attr("id") == "county"){
					var newSelect = $(this).val();
					searchFrom.s_r_code = newSelect;
					getdata(searchFrom);
					getdaydata(searchFrom);
				}
			});

			//查询统计
			function getdata(data){
				axios(baseurl+"index.bigData/detailsBigData", {
					method: "POST",
					data: data,
				}).then(res => {
					if(res.data.code == 1){
						if(searchFrom.s_mid == ''){
							$("#shop_num").html(res.data.data.shop_num+'家');
							$("#today_shop_num").html(res.data.data.today_shop_num+'家');
						}else{
							// $("#shop_num").remove();
							$("#today_shop_num_li").remove();
						}
						
						$("#order_num").html(res.data.data.order_num+'单');
						$("#ad_num").html(res.data.data.ad_num+'条');
						$("#adplay_num").html(res.data.data.adplay_num+'条');
						$("#month_order_num").html(res.data.data.month_order_num+'单');
						$("#month_ad_num").html(res.data.data.month_ad_num+'条');
						$("#month_adplay_num").html(res.data.data.month_adplay_num+'条');
						$("#today_order_num").html(res.data.data.today_order_num+'单');
						$("#today_ad_num").html(res.data.data.today_ad_num+'条');
						$("#today_adput_num").html(res.data.data.today_adput_num+'条');
					}else{
						console.log(res.data.msg);
					}
				})
			}

			//根据天数查询统计
			function getdaydata(data){
				axios(baseurl+"index.bigData/detailsDayBigData", {
					method: "POST",
					data: data,
				}).then(res => {
					if(res.data.code == 1){
						$("#date_order_num").html(res.data.data.order_num+'单');
						$("#date_ad_num").html(res.data.data.ad_num+'条');
						$("#date_adput_num").html(res.data.data.adput_num+'条');
						$("#date_adplay_num").html(res.data.data.adplay_num+'条');
					}else{
						console.log(res.data.msg);
					}
				})
			}

			getdata(searchFrom);
			getdaydata(searchFrom);

			function putdata(type){
				$(".putdata").removeClass('now');
				$("#putdata"+type).addClass('now');
				if(searchFrom.day_type != type){
					searchFrom.day_type = type;
					getdaydata(searchFrom);
				}
			}

			var h = $(window).height()
			console.log(h)
			$('.part2').css('height',h*0.48)
			$('.part5').css('height',h*0.32)
			$('.main').css('margin-top',h*0.15)
			// 商家分布
		    var dom = document.getElementById('container');
		    var myChart = echarts.init(dom, null, {
		      renderer: 'canvas',
		      useDirtyRect: false
		    });
		    var app = {};
		    
		    // var option;
			// var hl_XData = ["50-100","100-150","150-200","200-250","250-300","300-350","350-400","400-450","1450-1500","3750-3800","3800-3850","3850-3900"]
		    // option = {
			// 	xAxis: {
			// 		type: 'category',
			// 		data: ['张家口', '承德', '唐山', '秦皇岛', '廊坊', '保定', '邯郸','邢台','衡水','沧州'],
			// 		axisLine:{
			// 			lineStyle:{
			// 				color:'#fff'
			// 			}
			// 		}
			// 	},
			// 	yAxis: {
			// 		type: 'value',
			// 		axisLine:{
			// 			lineStyle:{
			// 				color:'#fff'
			// 			}
			// 		}
			// 	},
		 	//  	series: [
			// 		{
			// 			data: [120, 200, 150, 80, 70, 110, 130,25,56,85],
			// 			type: 'bar',
			// 			showBackground: true,
			// 			minBarWidth: hl_XData.length>7?20:35, // 根据数组的长度展示不同的柱子的宽度，当数据太多时，柱子变窄
			// 			itemStyle: {
			// 				normal: {
			// 					color:(val) => {
			// 						var colorList = ['#63b2ee', '#76da91', '#f8cb7f', '#f89588','#7cd6cf','#9192ab','#7898e1','#efa666','#eddd86','#9987ce'];
			// 						return colorList[val.dataIndex]
			// 					},
			// 					barBorderRadius: [10, 10, 0, 0],
			// 				},
			// 			},
			// 		}
			//   	]
			// };

		    // if (option && typeof option === 'object') {
		    //   myChart.setOption(option);
		    // }

		    // window.addEventListener('resize', myChart.resize);

			//跳转商家列表
			function toshoplist(){
				// window.open('list.html?s_p_code='+searchFrom.s_p_code+'&s_c_code='+searchFrom.s_c_code+'&s_r_code='+searchFrom.s_r_code);
				window.location.href = 'list.html?s_p_code='+searchFrom.s_p_code+'&s_c_code='+searchFrom.s_c_code+'&s_r_code='+searchFrom.s_r_code;
			}
		  </script>
	</body>
</html>